<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作：元素以及元素内容部分
		   .html()			 无参----功能：匹配元素当中的第一个元素内容
							 有参----功能：【设置】将匹配元素集合中所有元素替换为新元素
		   特点：针对  内容   +元素
		   .val()			无参----功能：表单内元素：input、select生效
										 获取表单元素中第一个元素的内容
							有参----功能：表单内元素：input、select生效
								input元素直接显示   value
								select元素不是显示 value
								option元素中内容：用户显示
								option元素中value值，
								必须当前select中，option元素value值
								直接赋值：打印select元素对象名称[object Object]
			特点： 针对 （表单内form元素可疑包裹）元素的内容	
			
		   .text()			无参---功能：获取匹配元素集合中所有元素的文本内容
							有参---功能：【设置】匹配元素集合中所有文本
											内容替换
			特点：
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数的使用</h1>
		<button>按钮-针对html()函数-有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>var()函数使用</h1>
		<button>按钮-针对var()函数-无参</button>
		<input type="text" value="文本框真实数据">
		<input type="text" placeholder="输入框显示效果[提示]">
		<button>按钮-针对var()函数-有参</button>
		<select >
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>text()函数使用</h1>
		<button class="btn1">按钮-针对text()函数-无参</button>
		<button class="btn2">按钮-针对text()函数-无参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		<!-- 下拉列表  select>option*3 需要加value -->
		<!-- jq：点击按钮，设置下拉列表的值 | html()与val() 有参是否存在区别 -->
		<script>
			//1.找到  类名为  btn1的按钮--点击---弹窗内容   三个 p元素内容
			//2.找到  类名为  btn2的按钮--点击---lorem4/5/6  改为  "修改文本"【有参】
			$("button.btn1").click(function(){
				var ptext=$("p").text();
				alert(ptext);
			});
			$(".btn2").click(function(){
				$("p").text("修改文本");
			});
			
			
			
			/* $("button").click(function(){
				//设置元素第一个的值     1.直接设置下拉列表中value的值
				$("select").val("rem1");
				//设置元素第一个的值     2.给第一个值添加，设置的内容【本身存在】
				var rem=$("select").val();
				//[object Object] JavaScript中 对象的默认字符串表示形态
				//select元素  对象  输出[object Object]
				//value的值：真实数据  option中值：显示数据
				//object Object  测试：无参	
				alert("val()函数有参"+rem)
			}); */
			
			
			
			//动态效果：点击按钮，获取第一个表单元素的内容，元素打印出来
			// $("button").click(function(){
				/* 注意：js变量名不可以为关键字！   in是关键字 */
				// var ins	=$("input").val();
				// alert("val()函数无参："+ins)});
			
			
			
			// 有参：点击按钮--下面两个按钮span  改成 lorem3  lorem4
			//js变量【var  i=1】==jq变量
			//无参数    html()函数使用
			// var html=$("span").html();
			//BOM方式 打印数据
			//alert("无参数获取第一个元素内容："+html);
			/* $("button").click(function(){
				$("span").html("<span>lorem</span>");
			}); */
		</script>
	</body>
</html>